<template>
	<div class="bubble-box">
		<div class="bubble-content">
			{{ message }}
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			message: String, //气泡弹框的内容
			position: String //气泡弹框的位置
		},
		data() {
			return {
				arrowPlacement: ""
			};
		},
		computed: {
			boxStyle() {
				return {
					left: this.arrowPlacement === "left" ? "20px" : null,
					right: this.arrowPlacement === "right" ? "20px" : null,
					top: this.arrowPlacement === "top" ? "20px" : null,
					bottom: this.arrowPlacement === "bottom" ? "20px" : null
				};
			},
			arrowStyle() {
				return {
					left: this.arrowPlacement === "left" ? "-10px" : null,
					right: this.arrowPlacement === "right" ? "-10px" : null,
					top: this.arrowPlacement === "top" ? "-10px" : null,
					bottom: this.arrowPlacement === "bottom" ? "-10px" : null
				};
			}
		},
		mounted() {
			switch (this.position) {
				case "left":
					this.arrowPlacement = "left";
					break;
				case "right":
					this.arrowPlacement = "right";
					break;
				case "top":
					this.arrowPlacement = "top";
					break;
				case "bottom":
					this.arrowPlacement = "bottom";
					break;
				default:
					this.arrowPlacement = "top";
			}
		}
	};
</script>

